Dialog Using BootStrap in ASP.Net

In this blog , I’m explaining how to make dialog using Bootstrap in ASP.Net

Example :-

In This Example we Open Dialog On Button Click With Help BootStrap File

Form Design:-

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Dialog.aspx.cs"Inherits="Dialog"%>
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
    <title></title>
    <scriptsrc="Js/jquery-1.8.3.min.js"></script>
    <scriptsrc="Js/jquery-ui-1.9.2.custom.min.js"></script>
    <linkhref="Bootstrap/jquery-ui-1.10.3.custom.css"rel="stylesheet"/>
 
</head>
<body>
    <formid="form1"runat="server">
        <div>
            <center>
          <h1>Open Dialog</h1>
      </center>
            <center>
            <div>
                <asp:ButtonID="BtnShowDialog"  runat="server"Text="Show Dialog"></asp:Button>&nbsp;&nbsp;&nbsp;
                <asp:ButtonID="BtnDialog"   runat="server"Text="Show Dialog Sample"></asp:Button>
            </div>
            <br/>
            <divid="divDialog">
             <h3>Kamlakar Singh</h3>
                <hr/>
                <p>Hello How Are You ?</p>
                <p>I am Fine And</p>
               <p>I hope You Are Also Fine.</p>
        </div>
            <divid="dialogSample">
             <h3>Pawan Shukla</h3>
                <hr/>
               <p>Hello How Are You ?</p>
                <p>I am Fine And</p>
                <p>I hope You Are Also Fine.</p>
        </div>
        </center>
        </div>
    </form>
</body>
</html>
<scripttype="text/javascript">
    $(document).ready(function () {
        //#dialogSample
        $('input[type=submit],input[type=button]').button();
        // Dialog Link
        $('#BtnShowDialog').click(function () {
            $('#divDialog').dialog('open');
            returnfalse;
        });
        // Modal Link
        $('#BtnDialog').click(function () {
            $('#dialogSample').dialog('open');
            returnfalse;
        });
 
        // Dialog Simple
        $('#divDialog').dialog({
            autoOpen: false,
            width: 600,
            modal: true,
            buttons: {
                "Ok": function () {
                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
               }
            }
        });
        // Dialog message
        $("#dialogSample").dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                Ok: function () {
                    $(this).dialog("close");
                }
            }
        });
    });
</script>

Firstly create two button show dialog and show dialog sample then create two <div> tag and write content inside both <div> tag . then call dialog() method. Inside $(document).ready(function () {} function. On button click.

Use this BootStrap File :-

<scriptsrc="Js/jquery-1.8.3.min.js"></script>
<scriptsrc="Js/jquery-ui-1.9.2.custom.min.js"></script>
<linkhref="Bootstrap/jquery-ui-1.10.3.custom.css"rel="stylesheet"/>

Download and add the above three files into your projects because it’s

mandatory for using the bootstrap libraries and methods.

Use dialog Method :-

<script type="text/javascript">
 
    $(document).ready(function () {
 
        // Dialog Link
 
        $('#BtnShowDialog').click(function () {
            $('#divDialog').dialog('open');
            returnfalse;
        });
        // Modal Link
        $('#BtnDialog').click(function () {
            $('#dialogSample').dialog('open');
            returnfalse;
        });
 
        // Dialog Simple
 
        $('#divDialog').dialog({
            autoOpen: false,
            width: 600,
            modal: true,
            buttons: {
                "Ok": function () {
                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });
 
        // Dialog message
        $("#dialogSample").dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                Ok: function () {
                    $(this).dialog("close");
                }
            }
        });
    });
</script>